<template>
    <el-card style="width: 100%; height: 70px">
      <div>
        <el-form :data="checkForm" :inline="true">
          <el-form-item style="font-weight: bold">
            <el-input
              v-model="checkForm.name"
              style="height: 35px"
              placeholder="昵称"
            ></el-input>
          </el-form-item>
          <button
            type="button"
            class="btn btn-outline-primary"
            style="
              width: 80px;
              height: 35px;
              margin-top: -18px;
              margin-left: -20px;
            "
            @click="checkUsers"
          >
            查询
          </button>
          <button
            type="button"
            class="btn btn-outline-warning"
            style="
              width: 80px;
              height: 35px;
              margin-top: -18px;
              margin-left: 20px;
            "
            @click="reset"
          >
            重置
          </button>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 2px">
      <button
        style="width: 100px"
        @click="deleteAllUser"
        class="btn btn-outline-danger"
      >
        批量删除
      </button>
      <button
        style="margin-left: 10px; width: 80px"
        @click="addDialogVisibleMethod"
        class="btn btn-outline-info"
      >
        添加
      </button>
    </el-card>
    <el-card style="margin-top: 2px">
      <div>
        <el-table
          :data="
            tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          border
          style="width: 100%"
          header-row-class-name="table_header_class"
          @selection-change="handelSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="60px" align="center">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="avatar"  label="头像" width="180" align="center">
            <template #default="scope">
              <img style="width:48px;height:48px" :src="scope.row.avatar" />
            </template>
          </el-table-column>
          <el-table-column prop="username" label="账号" align="center" />
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column
            label="电话"
            align="center"
            prop="phone"
          ></el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-popconfirm
                title="您确认要删除嘛?"
                @confirm="deleteUser(scope.row.id)"
                confirm-button-text="确认"
                cancel-button-text="取消"
                icon-color="red"
                style="height: 400px"
              >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
              <el-button @click="openUpdate(scope.row.id)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!--添加-->
    <el-dialog
      v-model="addDialogVisible"
      title="添加"
      style="font-weight: bold"
      width="35%"
    >
      <el-form
        style="margin-left: 120px"
        :model="addForm"
        :inline="true"
        label-width="120px"
      >
        <el-form-item v-if="addRuleFlag" style="width: 400px; height: 30px">
          <div
            style="
              margin-left: 50px;
              color: rgb(220, 53, 69);
              width: 288px;
              height: 33px;
              border: 1px solid rgb(220, 53, 69);
              background-color: rgb(254, 242, 242);
            "
          >
            <div style="float: left">
              <el-icon style="margin: 6px" :size="20"><WarningFilled /></el-icon>
            </div>
            <div style="float: left; font-size: 14px; color: grey">
              <p>{{ addRuleMsg }}</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="账号" style="font-weight: bold" prop="name">
          <el-input v-model="addForm.username" />
        </el-form-item>
        <el-form-item label="昵称" style="font-weight: bold">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="电话" style="font-weight: bold">
          <el-input v-model="addForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱" style="font-weight: bold">
          <el-input v-model="addForm.email" />
        </el-form-item>
        <el-form-item label="头像">
          <div style="width: 200px; height: 200px">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="addForm.avatar" :src="addForm.avatar" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUser"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  
    <!--修改-->
    <el-dialog
      v-model="updateDialogVisible"
      title="修改"
      style="font-weight: bold"
      width="25%"
    >
      <el-form :model="updateForm" :inline="true" label-width="120px">
        <el-form-item v-if="updateRuleFlag" style="width: 400px; height: 30px">
          <div
            style="
              margin-left: 50px;
              color: rgb(220, 53, 69);
              width: 288px;
              height: 33px;
              border: 1px solid rgb(220, 53, 69);
              background-color: rgb(254, 242, 242);
            "
          >
            <div style="float: left">
              <el-icon style="margin: 6px" :size="20"><WarningFilled /></el-icon>
            </div>
            <div style="float: left; font-size: 14px; color: grey">
              <p>{{ updateRuleMsg }}</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="账号" style="font-weight: bold" prop="name">
          <el-input v-model="updateForm.username" />
        </el-form-item>
        <el-form-item label="昵称" style="font-weight: bold">
          <el-input v-model="updateForm.name" />
        </el-form-item>
        <el-form-item label="电话" style="font-weight: bold">
          <el-input v-model="updateForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱" style="font-weight: bold">
          <el-input v-model="updateForm.email" />
        </el-form-item>
        <el-form-item label="头像">
          <div style="width: 200px; height: 200px">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/file/upload"
              :show-file-list="false"
              :on-success="handleUpdateSuccess"
            >
              <img v-if="updateForm.avatar" :src="updateForm.avatar" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateUser"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  
    <!--分页-->
    <div>
      <el-pagination
        style="margin-left: 730px"
        small
        background
        @current-change="currentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="tableData.length"
        class="mt-4"
      />
    </div>
  </template>
    
    <script>
  import {
    getAll,
    addOne,
    deleteOne,
    deleteAll,
    selectOne,
    updateOne,
    conditionQuery,
  } from "../../api/index";
  
  export default {
    data() {
      return {
        checkForm: {
          name: "",
        },
        tableData: [],
        currentPage: 1,
        pageSize: 8,
        addDialogVisible: false,
        updateDialogVisible: false,
        addForm: {
          username: "",
          name: "",
          phone: "",
          email: "",
          avatar: "",
        },
        updateForm: {},
        addRuleFlag: false,
        addRuleMsg: "",
        updateRuleFlag: false,
        updateRuleMsg: "",
        ids: [],
        flag:true
      };
    },
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        getAll("user").then((res) => {
          if (res.code === 200) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      },
      currentChange(val) {
        this.currentPage = val;
      },
      handleAvatarSuccess(response) {
        console.log(response);
        this.addForm.avatar = response.data;
      },
      handleUpdateSuccess(response) {
        this.updateForm.avatar = response.data;
      },
      addDialogVisibleMethod() {
          (this.addForm.avatar = ""),
          (this.addForm.username = ""),
          (this.addForm.name = ""),
          (this.addForm.email = ""),
          (this.addForm.phone = ""),
          (this.addRuleFlag = false),
          (this.addRuleMsg = ""),
          (this.addDialogVisible = true);
      },
      addUser() {
        if(this.addForm.username===""){
          this.addRuleFlag=true,
          this.addRuleMsg="账号为空"
        }else if(this.addForm.name===""){
          this.addRuleFlag=true,
          this.addRuleMsg="昵称为空"
        }else if(this.addForm.phone===""){
          this.addRuleFlag=true
          this.addRuleMsg="电话为空"
        }else if(this.addForm.email===""){
          this.addRuleFlag=true,
          this.addRuleMsg="邮箱为空"
        }else if(this.addForm.avatar===""){
          this.addRuleFlag=true,
          this.addRuleMsg="请上传头像"
        }else{
          addOne("user",this.addForm).then(res=>{
              if(res.code===200){
                  this.addDialogVisible=false,
                  this.$message.success(res.message),
                  this.loadData()
              }else{
                  this.addDialogVisible=false
                  this.$message.error(res.message)
              }
          })
        }
      },
      deleteUser(id) {
        deleteOne("user", id).then((res) => {
          if (res.code === 200) {
            this.loadData();
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        });
      },
      deleteAllUser() {
        if (this.ids.length === 0 ) {
          this.$message.info("未选中");
        } else {
          this.$confirm("你确认要删除嘛？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "error",
          })
            .then(() => {
              deleteAll("user", this.ids).then((res) => {
                if (res.code === 200) {
                  this.loadData();
                  this.$message.success(res.message);
                } else {
                  this.$message.error(res.message);
                }
              });
            })
            .catch(() => {
              
              this.$message.info("取消删除");
            });
        }
      },
      handelSelectionChange(val) {
        this.ids=[]
        for (let i = 0; i < val.length; i++) this.ids[i] = val[i].id;
      },
      openUpdate(id) {
          this.updateRuleFlag=false,
          this.updateRuleMsg="",
        selectOne("user", id).then((res) => {
          if (res.code === 200) {
            this.updateForm = res.data;
            this.updateDialogVisible = true;
          } else {
            this.$message.error(res.message);
          }
        });
      },
      updateUser() {
        if(this.updateForm.username===""){
          this.updateRuleFlag=true,
          this.updateRuleMsg="账号不能为空"
        }else if(this.updateForm.name===""){
          this.updateRuleFlag=true,
          this.updateRuleMsg="昵称不能为空"
        }else if(this.updateForm.phone===""){
          this.updateRuleFlag=true,
          this.updateRuleMsg="电话不能为空"
        }else if(this.updateForm.email===""){
          this.updateRuleFlag=true,
          this.updateRuleMsg="邮箱不能为空"
        }else if(this.updateForm.avatar===""){
          this.updateRuleFlag=true,
          this.updateRuleMsg="请上传头像"
        }else {
          updateOne("user", this.updateForm).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.message);
              (this.updateDialogVisible = false), this.loadData();
            } else {
              this.$message.error(res.message);
            }
          });
        }
      },
      reset() {
        this.checkForm.name = ""
      },
      checkUsers() {
        if (this.checkForm.name === "") {
          this.loadData();
        } else {
          conditionQuery("user", this.checkForm).then((res) => {
            if (res.code === 200) {
              this.tableData = res.data;
            } else {
              this.$message.error(res.message);
            }
          });
        }
      },
    },
  };
  </script>
    
    <style lang="less" scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /deep/ .table_header_class th {
    background-color: #f0f2ff;
    color: #8c99ff;
    text-align: center;
    height: 50px;
  }
  </style>
    
    <style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  </style>
    